import React from 'react';
import Taro from '@tarojs/taro';

import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
type IInfoProps = T.IProps & T.IInfoProps;

import { View, Text, Image, Radio } from '@tarojs/components';
import './Pay.less';
import icon from './img/icon.png'

// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
export default class Pay extends React.Component<Partial<IInfoProps>, T.IInfoState> {

  // 使用state值
  // constructor(props) {
  //   super(props)
  //   this.state={
  //     test:1
  //   }
  // }

  render() {
    let {
      main: { paymentMethod, points, accountBalanceTotal },
      actions: { action },
    } = this.props;
    return (
      <>
        {!!points?.deductionAmountOfPoints && (
          <View className="componentPay">
            <>
              <View className='jc-sb row'>
                <View className='row ai-c'>
                  <Text className='point-deduction'>积分抵扣({points?.totalPoint}积分)</Text>
                  <Image className="icon" src={icon} mode="widthFix" />
                </View>
                <View className='row ai-c'>
                  <Text className='point-deduction-price'>-¥ {points?.deductionAmountOfPoints?.toFixed(2)}</Text>
                  <Radio
                    color="#1784FC"
                    style={{ textAlign: 'center', marginLeft: 6, marginRight: -8, transform: 'scale(.8)' }}
                    checked={points?.integralDeductionSwitch}
                  // onClick={() => { action.commonChange('main.points.integralDeductionSwitch', !points?.integralDeductionSwitch) }}
                  />
                </View>
              </View>
            </>
          </View>
        )}

        <View className="componentPay">
          <>
            <Text className='payment-method'>支付方式</Text>
            <View className='row jc-sb'>
              <View className="button-wrapper" onClick={() => action.commonChange('main.paymentMethod', 'wechat')}>
                <View className={paymentMethod === 'wechat' ? "button" : "button-d"}>
                  <Text className={paymentMethod === 'wechat' ? "info" : "info-d"}>微信支付</Text>
                </View>
              </View>

              <View className="button-wrapper" onClick={() => action.commonChange('main.paymentMethod', 'wallet')}>
                <View className={paymentMethod === 'wallet' ? "button" : "button-d"}>
                  <Text className={paymentMethod === 'wallet' ? "info" : "info-d"}>钱包支付</Text>
                  <View className='row ai-c' style={{ marginTop: 5 }}>
                    <Text className={paymentMethod === 'wallet' ? "other" : "other-d"}>可用余额 </Text>
                    <Text className={paymentMethod === 'wallet' ? "other-p" : "other-dp"}> ¥{accountBalanceTotal}</Text>
                  </View>
                </View>
              </View>

            </View>
          </>
        </View>

        <View className='row ai-c' style={{ marginTop: 8, marginLeft: 4, marginBottom: '30vh' }}>
          <Radio
            color="#1784FC"
            style={{ textAlign: 'center', marginLeft: 6, marginRight: 1, transform: 'scale(.8)' }}
            checked={true}
            onClick={() => { console.log(1) }}
          />
          <Text style={{ fontSize: 14, color: '#999999' }}>已阅读并同意</Text>
          <Text style={{ fontSize: 14, color: '#218CFF' }} onClick={() => action.commonChange('main.showUserAgreement', true)}>《代取服务用户协议》</Text>
        </View>
      </>
    );
  }
}
